const Login = {
    template: `<div>登录页面</div>`
};

const ChangePasswordModal = {
    template: `
      <div class="modal" v-show="show">
      <div class="modal-content">
        <span class="close" @click="close">&times;</span>
        <h2>修改密码</h2>
        <form @submit.prevent="changePassword">
          <div>
            <label for="oldPassword">原密码:</label>
            <input type="password" v-model="oldPassword" required>
          </div>
          <div>
            <label for="newPassword">新密码:</label>
            <input type="password" v-model="newPassword" required>
          </div>
          <div>
            <label for="confirmPassword">确认新密码:</label>
            <input type="password" v-model="confirmPassword" required>
          </div>
          <button type="submit">提交</button>
        </form>
      </div>
      </div>
    `,
    data() {
        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
            show: false
        };
    },
    methods: {
        open() {
            this.show = true;
        },
        close() {
            this.show = false;
        },
        changePassword() {
            if (this.newPassword !== this.confirmPassword) {
                alert('新密码和确认密码不匹配');
                return;
            }
            // 模拟 API 调用以修改密码
            setTimeout(() => {
                alert('密码修改成功');
                this.close();
            }, 500); // 模拟 API 调用的延迟
        }
    }
};

const LogoutButton = {
    template: `
        <button @click="logout">注销</button>
    `,
    methods: {
        logout() {
            // 模拟 API 调用以注销用户
            setTimeout(() => {
                // 假设后端 API 成功清除了用户状态
                this.$router.push('/login');
            }, 500); // 模拟 API 调用的延迟
        }
    }
};

const Home = {
    components: {
        ChangePasswordModal,
        LogoutButton
    },
    template: `
        <div>
            <header>
                <div>
                    <img src="user_avatar.jpg" alt="用户头像" style="width: 50px; height: 50px; border-radius: 50%;">
                    <span>{{ userStatus }}</span>
                </div>
                <h1>欢迎, {{ username }}</h1>
                <logout-button></logout-button>
                <button @click="openChangePasswordModal">修改密码</button>
            </header>
            <aside>
                <h2>左侧菜单</h2>
                <ul>
                    <li v-for="subsystem in subsystems" :key="subsystem.id" @click="selectSubsystem(subsystem)"
                        :class="{ 'active': subsystem === selectedSubsystem }">
                        {{ subsystem.name }}
                    </li>
                </ul>
            </aside>
            <main>
                <h2>你的子系统:</h2>
                <ul>
                    <li v-for="menu in selectedSubsystem.menus" :key="menu.id">{{ menu.name }}</li>
                </ul>
            </main>
            <change-password-modal ref="changePasswordModal"></change-password-modal>
        </div>
    `,
    data() {
        return {
            username: '',
            userStatus: '',
            subsystems: [],
            selectedSubsystem: null
        };
    },
    mounted() {
        // 模拟从后台获取用户数据
        this.fetchUserData();
    },
    methods: {
        fetchUserData() {
            // 模拟 API 调用以获取用户数据
            setTimeout(() => {
                // 假设我们从后台获取了用户数据
                const userData = {
                    username: '张三',
                    userStatus: '在线',
                    subsystems: [
                        { id: 1, name: '子系统 A', menus: [{ id: 1, name: '菜单 1' }, { id: 2, name: '菜单 2' }] },
                        { id: 2, name: '子系统 B', menus: [{ id: 3, name: '菜单 3' }, { id: 4, name: '菜单 4' }] },
                        { id: 3, name: '子系统 C', menus: [{ id: 5, name: '菜单 5' }, { id: 6, name: '菜单 6' }] }
                    ]
                };
                // 用获取的数据更新 data 属性
                this.username = userData.username;
                this.userStatus = userData.userStatus;
                this.subsystems = userData.subsystems;
                // 默认选中第一个子系统
                this.selectedSubsystem = userData.subsystems[0];
            }, 1000); // 模拟 API 调用的延迟
        },
        selectSubsystem(subsystem) {
            this.selectedSubsystem = subsystem;
        },
        openChangePasswordModal() {
            this.$refs.changePasswordModal.open();
        }
    }
};

const routes = [
    { path: '/login', component: Login },
    { path: '/', component: Home }
];

const router = new VueRouter({
    routes
});

new Vue({
    el: '#app',
    router
});